<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-09-06 10:57:13
 * @LastEditors: voanit
 * @LastEditTime: 2022-09-09 12:00:26
-->
<script setup lang="ts">
import { ref } from "vue";
import { useIntersectionObserver } from "@vueuse/core";
const target = ref(null);
// const {stop} = useIntersectionObserver(target, fn, options)
// 1、参数一target表示被监听的DOM元素
// 2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区）
// 3、表示配置选项
// stop 是停止观察是否进入或移出可视区域的行为
const { stop } = useIntersectionObserver(
  // target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象
  target,
  // isIntersecting 是否进入可视区域，true是进入 false是移出
  // observerElement 被观察的dom
  ([{ isIntersecting }], observerElement) => {
    // 在此处可根据isIntersecting来判断，然后做业务
    // console.log(isIntersecting, 11119999);
    if (isIntersecting) {
      stop(); /*只要第一次进入就关闭观察者  */
      console.log(isIntersecting, 11119999);
    }
  }
);
</script>
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3=====category=====index.vue
    <div style="height: 600px"></div>
    <h1 ref="target">h1===box</h1>
    <img
      v-lazy="
        'https://yanxuan-item.nosdn.127.net/d0176b163973961ed01818d04ee94a06.png?quality=95&thumbnail=610x610&imageView'
      "
    />
  </div>
</template>
<style lang="less" scoped></style>
